<script setup lang="ts">
import {
  audioHistoryStorage,
  ftpStorage,
  runStorage,
  serverStorage,
  themeConfig,
  version,
  webStorage,
} from "@/storage";
import { Clock, Download, Refresh, Upload } from "@element-plus/icons-vue";
import { defaultThemeConfig } from "@/storage/defaults";
import { ElMessage, dayjs, UploadFile } from "element-plus";
import { quotations } from "@/utils";
import { onMounted, onUnmounted, ref, unref } from "vue";
import { GetUpdateVersion, onVersionMessageBox } from "@/utils/update";
import { emitter, openSelectDirectory } from "@/utils/mitt";
import { exportJson, importJson } from "@/utils/exportJson";
import { useRoute } from "vue-router";

const route = useRoute();

const colors = ref([
  "#17ac9b",
  "#F754A8",
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#1e90ff",
  "#c71585",
  "#FF4500",
  "#FF7800",
]);
const loading = ref(false);
const ver = ref("");

const onResetThemeConfig = (key: string) => {
  const defaultConfig = defaultThemeConfig();
  if (key) {
    // @ts-ignore
    themeConfig.value[key] = defaultConfig[key];
    ElMessage.success(`${key} => 恢复成功`);
  }
};

const getVersion = async () => {
  loading.value = true;
  ver.value = await GetUpdateVersion();
  loading.value = false;
};

const onRefreshGit = async () => {
  loading.value = true;
  await onVersionMessageBox();
  loading.value = false;
};

const querySearch = (queryString: string, cb: any) => {
  cb(quotations);
};

const onPrimaryColor = (color: string) => {
  themeConfig.value.primary = color;
};

const handleExportJson = () => {
  openSelectDirectory();
};

const handleImportJson = (file: UploadFile) => {
  importJson(file).then((json) => {
    if (json) {
      if (json.web) webStorage.value = json.web;
      if (json.server) serverStorage.value = json.server;
      if (json.ftp) ftpStorage.value = json.ftp;
      if (json.run) runStorage.value = json.run;
      if (json.themeConfig) themeConfig.value = json.themeConfig;
      if (json.audioHistory) audioHistoryStorage.value = json.audioHistory;
    }
  });
};

const emitKey = `on-directory-${route.fullPath}`;

onMounted(() => {
  emitter.on(emitKey, (localPath) => {
    const filename = `${dayjs().format("YYYY-MM-DD")}-部署器.json`;
    const option = {
      web: unref(webStorage),
      server: unref(serverStorage),
      ftp: unref(ftpStorage),
      run: unref(runStorage),
      themeConfig: unref(themeConfig),
      audioHistory: unref(audioHistoryStorage),
    };
    exportJson(localPath, option, filename);
  });
  getVersion();
});

onUnmounted(() => {
  emitter.off(emitKey);
});
</script>
<template>
  <div class="config-index pa5">
    <div class="flex align-center">
      <span class="color-primary">全局配置</span>
      <el-button
        class="ml-auto"
        type="info"
        :icon="Download"
        @click="handleExportJson"
        >导出全部JSON</el-button
      >
      <el-upload
        :auto-upload="false"
        @change="handleImportJson"
        :show-file-list="false"
      >
        <el-button plain type="warning" :icon="Upload" class="ml5"
          >导入全部JSON</el-button
        >
      </el-upload>
    </div>
    <el-input v-model="themeConfig.title" placeholder="请输入全局标题">
      <template #prepend>全局标题</template>
      <template #append>
        <el-button :icon="Clock" @click="onResetThemeConfig('title')" />
      </template>
    </el-input>
    <div class="el-input el-input--small">
      <div class="el-input-group__prepend">主题色</div>
      <div class="el-input__wrapper" style="justify-content: start">
        <el-color-picker v-model="themeConfig.primary" :predefine="colors" />

        <div
          class="append-color cursor-pointer ml3"
          v-for="(color, index) in colors"
          :key="index"
          :style="{ backgroundColor: color }"
          :class="{ active: themeConfig.primary === color }"
          @click="onPrimaryColor(color)"
        />
      </div>
      <div class="el-input-group__append">
        <el-button :icon="Clock" @click="onResetThemeConfig('primary')" />
      </div>
    </div>
    <div class="el-input el-input--small">
      <div class="el-input-group__prepend">开启TTS播报</div>
      <div class="el-input__wrapper" style="justify-content: start">
        <el-switch
          v-model="themeConfig.TTSPlay"
          inline-prompt
          active-text="开启"
          inactive-text="关闭"
        />
      </div>
      <div class="el-input-group__append">
        <el-button :icon="Clock" @click="onResetThemeConfig('TTSPlay')" />
      </div>
    </div>
    <el-autocomplete
      v-model="themeConfig.quotation"
      :fetch-suggestions="querySearch"
      clearable
      placeholder="选择语录"
      class="flex align-center"
    >
      <template #default="{ item }">
        <div class="value">
          <div>{{ item.label }}：{{ item.value }}</div>
        </div>
      </template>
      <template #prepend>TTS语录</template>
      <template #append>
        <el-button :icon="Clock" @click="onResetThemeConfig('quotation')" />
      </template>
    </el-autocomplete>
    <div class="el-input el-input--small">
      <div class="el-input-group__prepend">深色模式</div>
      <div class="el-input__wrapper" style="justify-content: start">
        <el-switch
          v-model="themeConfig.isIsDark"
          inline-prompt
          active-text="开启"
          inactive-text="关闭"
        />
      </div>
      <div class="el-input-group__append">
        <el-button :icon="Clock" @click="onResetThemeConfig('isIsDark')" />
      </div>
    </div>
    <div class="el-input el-input--small">
      <div class="el-input-group__prepend">终端深色模式</div>
      <div class="el-input__wrapper" style="justify-content: start">
        <el-switch
          v-model="themeConfig.isTerminalDark"
          inline-prompt
          active-text="开启"
          inactive-text="关闭"
        />
      </div>
      <div class="el-input-group__append">
        <el-button
          :icon="Clock"
          @click="onResetThemeConfig('isTerminalDark')"
        />
      </div>
    </div>
    <div class="el-input el-input--small">
      <div class="el-input-group__prepend">终端主题配置</div>
      <div class="el-input__wrapper" style="justify-content: start">
        <router-link
          to="/terminal_theme"
          class="cursor-pointer cursor-pointer-line color-primary"
        >
          终端主题配置
        </router-link>
      </div>
    </div>
    <div class="el-input el-input--small">
      <div class="el-input-group__prepend">终端字体大小</div>
      <div class="el-input__wrapper" style="justify-content: start; padding: 0">
        <el-input-number v-model="themeConfig.termFontSize" />
      </div>
      <div class="el-input-group__append">
        <el-button :icon="Clock" @click="onResetThemeConfig('termFontSize')" />
      </div>
    </div>
    <div class="el-input el-input--small">
      <div class="el-input-group__prepend">版本更新</div>
      <div class="el-input__wrapper" style="justify-content: start">
        <span v-if="loading" class="color-danger">获取版本中...</span>
        <span v-else-if="ver !== version" class="color-danger"
          >当前有新版本需要更新，点击更新按钮进行更新 =>
        </span>
        <span v-else class="color-primary">当前是最新版本</span>
      </div>
      <div class="el-input-group__append">
        <el-button :icon="Refresh" @click="onRefreshGit" :loading="loading"
          >更新</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.config-index {
  .el-input-group__append,
  .el-input-group__prepend {
    .el-button {
      padding: 5px 7px;
    }
  }

  .el-input-group__prepend {
    min-width: 120px;
  }

  .el-input__wrapper {
    border-radius: 0;
  }

  .el-color-picker__trigger {
    border: none !important;
    padding: 2px !important;
  }

  .append-color {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: red;
    border-radius: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;

    &.active {
      border-color: var(--el-text-color-primary);
    }
  }

  & > div {
    margin-bottom: 5px;
  }
}
</style>
